<template>

    <div class="hero">
        英雄的名字:{{ name }} , 英雄的攻击力:{{ attack }} <button @click="showAttack">查看{{ name }}攻击力</button>
    </div>


</template>

<script setup lang="ts" name='Hero'>
// import { ref, reactive, defineProps } from "vue";
//defineProps（defineXXXXX） 是vue 内置函数，不用显示的 import 
import { ref, reactive } from "vue";

// let name = ref('张三');
// let attack = ref(100);

//定义了属性， 并且 确定要修是什么类型
//写法1 JS

// defineProps(['name', 'attack'])
//有类型校验 --父组件中使用 
// defineProps({
//     name: String,
//     attack: Number
// })


//写法2 TS
interface Hero {
    name: string;
    attack: number;
}
//定义属性的变量  写法1 

// let props = { name: '', attack: 100 };
// let { name, attack } = { name: '', attack: 100 };
// let props = defineProps<Hero>()
// let attack = 100；
// console.log("props", props);
// function showAttack() {
//     alert(`${props.name}的攻击力${props.attack}`)
// }

//定义属性的变量  写法1 
let { name, attack } = defineProps<Hero>()
// let attack = 100；
function showAttack() {
    alert(`${name} 的攻击力 ${attack}`)
}




</script>

<style scoped>
.hero {

    width: 100%;
    min-height: 80px;
    line-height: 80px;
    margin: 10px;
    background-color: cadetblue;


}
</style>